<template>
    <div>
        <div class="editor-title">
            <span class="editor-title__name">{{ data.text }}</span>
        </div>
        <div class="img-btn-con" style="padding: 4px 16px 20px">
            <div class="editor-two__item">
                <div class="editor-two__item-head">视频标题</div>
                <el-input v-model="data.data.video_title" placeholder="输入视频标题" clearable />
            </div>
            <div class="editor-two__item">
                <div class="editor-two__item-head">上传视频<span>（视频格式为.mp4，大小不超过20M！）</span></div>
                <div class="video-box" v-if="data.data.video_src">
                    <video :src="data.data.video_src" controls style="object-fit: fill" preload="none" :autoplay="false" controlslist="nodownload"></video>
                    <div class="video-del" @click.stop="delVideo">
                        <el-icon size="14px" color="#fff"><CloseBold /></el-icon>
                    </div>
                </div>
                <el-upload
                    ref="uploadRef"
                    accept=".mp4"
                    v-loading="videoLoading"
                    class="prize-upload"
                    :action="actionUrl()"
                    :http-request="uploadVideo"
                    list-type="picture-card"
                    :on-remove="handleRemove"
                    :on-exceed="handleExceed"
                    :before-upload="beforeAvatarUpload"
                    :on-change="fileChange"
                    :limit="1"
                    v-else
                >
                    <el-icon color="#999">
                        <upload-filled />
                    </el-icon>
                </el-upload>
            </div>
            <div class="editor-two__item" style="margin-bottom: 10px">
                <div class="editor-two__item-head">视频封面<span>（长方形，建议尺寸375x240px或等比放大）</span></div>
                <div class="left-img" @click="clickAdd">
                    <img :src="data.data.video_cover || none_img" class="left-img" />
                    <div class="tip-con flexs">
                        <span>更换图片</span>
                    </div>
                    <div class="video-del" @click.stop="delImg" v-if="data.data.video_cover">
                        <el-icon size="14px" color="#fff"><CloseBold /></el-icon>
                    </div>
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con">圆角距</div>
                <div style="flex: 1; padding-right: 1rem">
                    <el-slider v-model="data.rpxStyle['border-radius']" :max="max" @change="radius_change" />
                </div>
                <div style="width: 4rem">
                    <el-input v-model.number="data.rpxStyle['border-radius']" @input="radius_change" />
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con">页面边距</div>
                <div style="flex: 1; padding-right: 1rem">
                    <el-slider v-model="data.rpxStyle['margin-left']" :max="max" @change="padding_change" />
                </div>
                <div style="width: 4rem">
                    <el-input v-model.number="data.rpxStyle['margin-left']" @input="padding_change" />
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con">视频高度</div>
                <div style="flex: 1; padding-right: 1rem">
                    <el-slider v-model="data.style.height" :min="120" :max="400" />
                </div>
                <div style="width: 4rem">
                    <el-input v-model.number="data.style.height" />
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con">上边距</div>
                <div style="flex: 1; padding-right: 1rem">
                    <el-slider v-model="data.rpxStyle['margin-top']" :min="0" :max="300" @change="mtt_change" />
                </div>
                <div style="width: 4rem">
                    <el-input v-model.number="data.rpxStyle['margin-top']" @input="mtt_change" />
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con">下边距</div>
                <div style="flex: 1; padding-right: 1rem">
                    <el-slider v-model="data.rpxStyle['margin-bottom']" :min="0" :max="300" @change="mtb_change" />
                </div>
                <div style="width: 4rem">
                    <el-input v-model.number="data.rpxStyle['margin-bottom']" @input="mtb_change" />
                </div>
            </div>
        </div>
    </div>
    <!-- 图片库 -->
    <picture-library :show="showImg" @close="showImg = false" @select="selectImg" :select_multiple="false"> </picture-library>
</template>

<script setup>
import { getCurrentInstance, ref } from "vue"
import { UploadFilled, CloseBold } from "@element-plus/icons-vue"
import PictureLibrary from "@components/PictureLibrary.vue"
import UploadVideo from "@mixins/upload-video"

const { proxy } = getCurrentInstance()
const max = 30 // 最大值，适用于内外边距和圆角

/**
 * 视频容器
 * @property {Object} data  数据
 */
const props = defineProps({
    data: {
        type: Object,
        default: {
            id: 15,
            type_name: "video",
            text: "视频容器",
            style: {
                height: 320,
            },
            data: {
                video_src: "",
                video_title: "",
                video_cover: "",
                nonde_img:
                    "https://cdn.huashushop.com/tenant_593be52a46f869eea8b31d146d21de7a/album/202305/20230513_1e93aba6c248e3979bca2a47a1ea05f5.png!img_400",
            },
        },
    },
})

/**
 * 上传视频
 * @param {Object} uploadRef upload ref
 * @param {Function} delVideo 删除
 */
const { videoList, fileList, videoLoading, actionUrl, handleRemove, handleExceed, fileChange, beforeAvatarUpload } = UploadVideo()
const uploadRef = ref(null)
// 上传视频
const uploadVideo = () => {
    videoLoading.value = true
    let data = new FormData()
    data.append("file", fileList.value[0])
    proxy.$axios
        .post("upload/video", data)
        .then((res) => {
            fileList.value = []
            videoLoading.value = false
            if (res.data.code == 0) {
                videoList.value.push(res.data.data.path)
                props.data.data.video_src = proxy.imgUrl + res.data.data.path
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {
            videoLoading.value = false
        })
}
const delVideo = () => {
    videoList.value = []
}

/**
 * 要更换的图片
 */
const showImg = ref(false)
const none_img = "https://cdn.huashushop.com/tenant_593be52a46f869eea8b31d146d21de7a/album/202305/20230513_1e93aba6c248e3979bca2a47a1ea05f5.png!img_400"
const clickAdd = () => {
    showImg.value = true
}
const selectImg = (val) => {
    showImg.value = false
    props.data.data.video_cover = proxy.imgUrl + val[0].photo
}
const delImg = () => {
    props.data.video_cover = ""
}

// 页面边距变化
const padding_change = (val) => {
    val = val > max ? max : val
    props.data.rpxStyle["margin-left"] = props.data.rpxStyle["margin-right"] = Number(val)
}
// 圆角变化
const radius_change = (val) => {
    val = val > max ? max : val
    props.data.rpxStyle["border-radius"] = Number(val)
}

// margin
const mtt_change = (val) => {
    props.data.rpxStyle["margin-top"] = Number(val)
}
const mtb_change = (val) => {
    props.data.rpxStyle["margin-bottom"] = Number(val)
}
</script>

<style lang="less" scoped>
.prize-upload {
    :deep(.el-upload--picture-card) {
        width: 100px;
        height: 100px;
        line-height: 100px;
    }

    :deep(.el-upload-list__item) {
        width: 100px;
        height: 100px;
    }
}
.video-box {
    width: 300px;
    height: 200px;
    margin-right: @margin-md;
    position: relative;
    video {
        width: 100%;
        height: 100%;
    }
}
.video-del {
    position: absolute;
    top: -5px;
    right: -8px;
    z-index: 11;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background-color: @themes;
    cursor: pointer;
}
.left-img {
    width: 100px;
    height: 100px;
    flex: none;
    cursor: pointer;
    position: relative;
}
.tip-con {
    font-size: 12px;
    color: #fff;
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2px;
    justify-content: center;
    span {
        &:hover {
            color: #ededed;
        }
    }
}
.editor-title {
    padding: 24px 16px;
}
.label-con {
    flex: none;
    width: 82px;
    font-size: 14px;
    padding-right: 10px;
    color: #969799;
}

.editor-two__item {
    margin-bottom: 12px;
}
.editor-two__item-head {
    color: #333;
    display: flex;
    align-items: center;
    height: 40px;
    span {
        font-size: @font-size-sm;
    }
}
</style>
